import { Card, Col, Row, Icon, Avatar } from 'antd';
import React, { useState, useEffect } from 'react';
import { MOULD_MARK } from "@/generic/ConfigParams";
import user from "@/assets/user.jfif";
import group from "@/assets/group.jpg";
import folder from "@/assets/folder.jpg";
// import folder2 from "@/assets/folder02.jpg";
import vdisk from "@/assets/vdisk.jpg";

const { Meta } = Card;
const SPAN = { xs: 24, sm: 12, md: 8, lg: 6 }

const ManageOptions = props => {

    const { dispatch } = props;
    
    return (
        <div>
            <Row gutter={[16, { xs: 8, sm: 16, md: 16, lg: 32 }]}>
                <Col {...SPAN}>
                    <Card
                        cover={
                            <img
                                alt="用户"
                                src={user}
                            />
                        }
                        actions={[
                            <span onClick={() => {
                                dispatch({
                                    type: 'manager/pageSkipping',
                                    payload: { isOpts: false, mark: MOULD_MARK.Account }
                                })
                            }}>
                                <Icon type="user-add" key="user-add" />&nbsp;用户管理
                            </span>,
                        ]}
                        bodyStyle={{ display: 'none' }}
                        hoverable={true}
                    />
                </Col>
                <Col {...SPAN}>
                    <Card
                        cover={
                            <img
                                alt="团队"
                                src={group}
                            />
                        }
                        actions={[
                            <span onClick={() => {
                                dispatch({
                                    type: 'manager/pageSkipping',
                                    payload: { isOpts: false, mark: MOULD_MARK.Group }
                                })
                            }}>
                                <Icon type="usergroup-add" key="usergroup-add" />&nbsp;组管理
                            </span>,
                        ]}
                        bodyStyle={{ display: 'none' }}
                        hoverable={true}
                    />
                </Col>
                <Col {...SPAN}>
                    <Card
                        cover={
                            <img
                                alt="虚拟磁盘"
                                src={vdisk}
                            />
                        }
                        actions={[
                            <span onClick={() =>{
                                dispatch({
                                    type: 'manager/pageSkipping',
                                    payload: { isOpts: false, mark: MOULD_MARK.Vdisk }
                                })
                            }}>
                                <Icon type="hdd" key="hdd" />&nbsp;磁盘管理
                            </span>,
                        ]}
                        bodyStyle={{display: 'none'}}
                        hoverable={true}
                    />
                </Col>
                <Col {...SPAN}>
                    <Card
                        cover={
                            <img
                                alt="目录权限"
                                src={folder}
                            />
                        }
                        actions={[
                            <span onClick={() => {
                                dispatch({
                                    type: 'manager/pageSkipping',
                                    payload: { isOpts: false, mark: MOULD_MARK.Folder }
                                })
                            }}>
                                <Icon type="folder" key="folder" />&nbsp;目录权限
                            </span>,
                        ]}
                        bodyStyle={{ display: 'none' }}
                        hoverable={true}
                    />
                </Col>
            </Row>
        </div>
    );
}

export default ManageOptions;